<template>
	<view class="deviceBx">
		<scroll-view scroll-y="true" class="scroll">
			<view class="scroll-center">
				<view class="loadimage">
					上传照片
				</view>
				<view class="load" @click="loadImage">
					<image class="deviceImage" :src="deviceImage" mode="" v-if="deviceImage">
					</image>
					<view class="load-more" v-if="!deviceImage">
						<image src="/static/image/business/10.png" mode=""></image>
						<view class="loadtext">
							上传设备故障图片
						</view>
					</view>
				</view>

				<view class="prodes loadimage">
					问题描述
				</view>
				<textarea auto-blur="fales" @blur="deviceTxt" placeholder-class="placeholder"
					placeholder="请用文字描述故障情况"></textarea>
				<button class="repairs" @click="repairDeviceApply">立即报修</button>
				<view class="callup" @click="getPhone">
					<view class="phone">
						<view class="phoneimage">
							<image src="../../../static/image/shop/19.png" mode=""></image>
						</view>
						<view class="phonetxt">
							直接电话联系
						</view>
						<view class="phonetxts">
							服务工程师
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import $http from "@/ajax/http.js";
	export default {
		data() {
			return {
				token: wx.getStorageSync('token'),
				deviceImage: "",
				deviceTxts: "",
				linkPhone: "15550220270",
				tempFilePaths: '',
				ids: ''
			}
		},
		methods: {
			deviceTxt(e) {
				this.deviceTxts = e.detail.value
				console.log(e.detail.value, "eeeeeeeeee");
			},
			// 上传图片
			loadImage() {
				wx.chooseImage({
					count: 1,
					sizeType: ['original'], //原图  
					sourceType: ['album', 'camera'], //支持选取图片  
					success: (res) => {
						this.tempFilePaths = res.tempFilePaths[0];
						this.deviceImage = res.tempFilePaths[0]

						wx.uploadFile({
							url: 'https://6d103945.r3.cpolar.top/store/my/uploadProblemImg',
							filePath: this.tempFilePaths,
							name: 'file',
							header: {
								'content-type': 'multipart/form-data',
								Authorization: this.token,
							},
							success: (uploadRes) => {
								// 上传成功  
								if (uploadRes.statusCode === 200) {
									const data = JSON.parse(uploadRes.data);
									// 根据服务器返回的数据处理逻辑  
									console.log(data, "上传成功");
									this.ids = data.data.uploadFileId
								} else {
									console.log(uploadRes, "上传失败，状态码不是200");
								}
							},
							fail: (uploadError) => {
								// 上传失败  
								console.log(uploadError, "上传失败");
								// 显示失败提示给用户  
								wx.showToast({
									title: '图片上传失败',
									icon: 'none',
									duration: 2000
								});
							}
						});
					}
				});
			},

			repairDeviceApply() {
				$http.request({
					url: '/store/my/repairDeviceApply',
					header: {
						Authorization: this.token,
					},
					data: {
						problemDesc: this.deviceTxts,
						uploadFileId: this.ids
					},
					method: 'POST'
				}).then((res) => {
					if (res.code == 200) {
						wx.showToast({
							title: "报修资料上传成功，等待服务工程师联系！",
							icon: 'success'
						})
						this.deviceImage = ''
						this.ids = ''
					}
					console.log(res, "报修成功");
				})
			},

			// 调用手机拨号
			getPhone() {
				const that = this
				uni.showModal({
					title: '提示',
					content: '是否拨打电话？',
					success: function(res) {
						console.log(this.linkPhone, "this.linkphone");
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: that.linkPhone,
								success: function() {
									console.log('拨打电话成功');
								},
								fail: function(error) {
									console.log('拨打电话失败：' + JSON.stringify(error));
								}
							});
						} else if (res.cancel) {
							console.log('用户取消拨打电话');
						}
					}
				});
			}


		}
	}
</script>

<style scoped lang="scss">
	.deviceBx {
		background: linear-gradient(to top, RGBA(2, 81, 84, 1), RGBA(18, 145, 157, 1));


		.scroll {
			height: calc(100vh);

			.scroll-center {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
		}

	}

	.loadimage {
		width: 676upx;
		font-weight: 400;
		font-size: 29upx;
		color: #FFFFFF;
		display: flex;
		justify-content: flex-start;
		margin-top: 40upx;
		margin-bottom: 40upx;
	}

	.load {
		width: 679upx;
		height: 300upx;
		background-color: #fff;
		border-radius: 20upx;
		display: flex;
		align-items: center;
		justify-content: center;

		.deviceImage {
			width: 674upx;
			height: 300upx;
			border-radius: 20upx;
		}

		.load-more {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		image {
			width: 78upx;
			height: 69upx;
		}
	}

	textarea {
		margin-top: 10upx;
		width: 676upx;
		height: 261upx;
		background-color: #eaeaea;
		border-radius: 15upx;
	}

	.repairs {
		width: 676upx;
		height: 91upx;
		line-height: 91upx;
		font-weight: 400;
		font-size: 32upx;
		color: #FFFFFF;
		margin-top: 32upx;
		background: linear-gradient(to right, rgba(19, 183, 163, 1), rgba(0, 131, 140, 1));
	}

	.callup {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 364upx;
		height: 365upx;
		background: linear-gradient(to top, rgba(3, 86, 89, 1), rgba(5, 90, 95, 1));
		border-radius: 50%;
		margin-top: 67upx;

		.phone {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 308upx;
			height: 307upx;
			border-radius: 50%;
			background: linear-gradient(to bottom right, rgba(19, 183, 163, 1), rgba(0, 128, 138, 1));

			.phoneimage {
				image {
					width: 90upx;
					height: 91upx;
				}
			}

			.phonetxt {
				font-weight: 500;
				font-size: 32upx;
				color: #FFFFFF;
				line-height: 35upx;
				margin-top: 17upx;
			}

			.phonetxts {
				font-weight: 400;
				font-size: 24upx;
				color: #FFFFFF;
				margin-top: 12upx;
			}
		}
	}
</style>